<template>
  <vxe-grid ref="table" v-bind="gridOptions" v-on="gridEvents">
    <template #option="{ row }">
      <template class="table-option">
        <vxe-button v-if="$isPermission('UserEdit')" status="primary" content="编辑"
                    @click="editRowEvent(row)"/>
        <vxe-button v-if="$isPermission('UserEdit')" status="warning" content="授权"
                    @click="authRowEvent(row)"/>
        <vxe-button v-if="$isPermission('UserEdit')" status="warning" content="重置密码"
                    @click="resetPassword(row)"/>
        <vxe-button status="primary" content="详情"
                    @click="viewRowEvent(row)"/>
      </template>
    </template>
  </vxe-grid>
  <UserEdit ref="edit" @ok="saveSuccess"/>
  <UserRoleEdit ref="auth"/>
</template>

<script>
import {getPageUser} from "@/api/sys/user";
import {getDictMap} from "@/util";
import UserEdit from "./SysUserEdit.vue";
import UserRoleEdit from "./SysUserRoleEdit.vue";
import {deleteRoleByCode} from "@/api/sys/role";
import {RESPONSE_CODE_SUCCESS} from "@/constant/response";
import {Message} from "view-ui-plus";
import {resetDefaultPassword} from "@/api/auth/password";

export default {
  name: "SysUserMgr",
  components: {UserEdit, UserRoleEdit},
  data() {
    return {
      sexDict: undefined,
      accountStatusDict: undefined,
      gridOptions: {
        toolbarConfig: {
          buttons: [
            {code: 'add', name: '新增'}
          ],
        },
        pagerConfig: {
          pageSize: 10
        },
        columns: [
          {type: 'seq', width: 60, title: '序号'},
          {field: 'userName', title: '用户名'},
          {field: 'nickName', title: '昵称'},
          {field: 'phone', title: '手机号'},
          {field: 'email', title: '邮箱'},
          {field: 'realName', title: '真实姓名'},
          {field: 'idNumber', title: '身份证号'},
          {field: 'birthDate', title: '出生日期'},
          {field: 'sex', title: '性别', formatter: this.formatterSexDict},
          {field: 'accountStatus', title: '状态', formatter: this.formatterAccountStatusDict},
          {title: '操作', width: 300, slots: {default: 'option'}}
        ],
        formConfig: {
          items: [
            {field: 'likeUserName', title: '用户名：', span: 6, itemRender: {name: 'input'}},
            {field: 'likePhone', title: '手机号：', span: 6, itemRender: {name: 'input'}},
            {field: 'likeEmail', title: '邮箱：', span: 6, itemRender: {name: 'input'}},
            {field: 'likeRealName', title: '真实姓名：', span: 6, itemRender: {name: 'input'}},
            {field: 'likeIdNumber', title: '身份证号：', span: 6, folding: true, itemRender: {name: 'input'}},
            {field: 'accountStatus', title: '账户状态：', span: 6, folding: true, itemRender: {name: 'input'}},
            {
              span: 24, align: 'center', collapseNode: true, itemRender: {
                name: '$buttons',
                children: [
                  {props: {type: 'submit', content: '查询', status: 'primary'}},
                  {props: {type: 'reset', content: '重置'}}
                ]
              }
            }
          ]
        },
        proxyConfig: {
          ajax: {
            query: ({page, form}) => {
              return getPageUser({
                pageIndex: page.currentPage,
                pageSize: page.pageSize,
                ...form
              })
            }
          }
        }
      },
      gridEvents: {
        toolbarButtonClick: this.toolbarButtonClick,
      },
    }
  },
  created() {
    getDictMap("Sex", "AccountStatus").then(res => {
      this.sexDict = res.get("Sex")
      this.accountStatusDict = res.get("AccountStatus")
      this.$refs.table.commitProxy('reload')
    })
  },
  methods: {
    resetPassword(row) {
      this.$Modal.confirm({
        title: '重置密码',
        content: '确认重置用户密码?<br/> 用户名:' + row.userName,
        okText: '确认',
        onOk: () => {
          resetDefaultPassword({
            userName: row.userName
          }).then(res => {
            if (res.code == RESPONSE_CODE_SUCCESS) {
              Message.success("重置成功")
            }
          })
        }
      })
    },
    authRowEvent(row) {
      this.$refs.auth.show({
        user: row
      })
    },
    toolbarButtonClick({code}) {
      switch (code) {
        case 'add': {
          this.$refs.edit.show({
            title: "添加用户"
          })
          return;
        }
        default: {
          return
        }
      }
    },
    viewRowEvent(row) {
      this.$refs.edit.show({
        title: "用户详情",
        type: "view",
        data: this.$utils.clone(row)
      })
    },
    editRowEvent(row) {
      this.$refs.edit.show({
        title: "修改用户",
        type: "edit",
        data: this.$utils.clone(row)
      })
    },
    saveSuccess() {
      this.$refs.table.commitProxy('reload')
    },
    formatterSexDict({cellValue}) {
      if (this.sexDict) {
        return this.sexDict.dataMap.get(cellValue).name
      }
      return cellValue
    },
    formatterAccountStatusDict({cellValue}) {
      if (this.accountStatusDict) {
        return this.accountStatusDict.dataMap.get(cellValue).name
      }
      return cellValue
    },
  }
}
</script>

<style scoped>

</style>
